<template>
	<view class="page">
		<view class="nav-box">
			<view class="nav-item" :class="{'selected' : navselected == item.id}" v-for="(item,index) in navList" :key="item.id" @click="naVChange(item.id)">
				{{item.name}}
			</view>
		</view>
		<scroll-view class="nav-status-box" scroll-x>
			<!-- <view class="flex-box"> -->
				<view class="status-item" :class="{'selected':statusSelected == item.id}" v-for="(item,index) in navStatusList" :key="item.id" @click="statusChange(item.id)">
					{{item.name}}
				</view>
			<!-- </view> -->
		</scroll-view>
		<scroll-view class="scroll-content" scroll-y @scrolltolower="scrollPage" >
			<listCard :item="item" :key="item.id" v-for="(item,index) in List" @jump="projectDetail(item)" :index="index"></listCard>
		</scroll-view>
		<view class="create-button" @click="createProject">
			创建项目
		</view>
	</view>
</template>

<script>
	import * as api from '@/utils/api.js';
	import listCard from '../component/card/listcard.vue'
	export default {
		components:{
			listCard
		},
		data() {
			return {
				apiInfo:{ // API参数信息
					currentPage:1,
					pageSize:10,
					type:0,
					leaderIds:[],
					participantIds:[],
					projectName:'',
					userId:'',
					status:'',
				},
				isScrollPageType:true,// 是否允许翻页 
				List:[],// 项目管理列表
				navselected:0,// 导航栏选中id
				statusSelected:'', // 导航状态选中id
				navList:[ // 导航栏列表
					{
						id:0,
						name:'所有项目'
					},
					{
						id:1,
						name:'我负责的'
					},
					{
						id:2,
						name:'已归档'
					},
				],
				navStatusList:[ // 状态列表
					{
						id:'',
						name:'全部',
					},
					{
						id:'0',
						name:'未开始',
					},
					{
						id:'1',
						name:'进行中'
					},
					{
						id:'2',
						name:'暂停'
					},
					{
						id:'3',
						name:'待审批'
					},
					{
						id:'4',
						name:'归档'
					},
					{
						id:'5',
						name:'完成'
					},
					{
						id:'6',
						name:'异常终结'
					}
				],
				
			}
		},
		onLoad() {
			
			this.projectInit();
		},
		onShow() {
			let refreshPage = getApp().globalData.refreshPage;
			if(refreshPage != null && refreshPage == 'project'){
				getApp().globalData.refreshPage = null;
				this.isScrollPageType = true;
				this.List=[];
				this.projectInit();
			}
		},
		methods: {
			/**
			 * 翻页触发事件
			 */
			scrollPage:function(){
				let isScrollPageType = this.isScrollPageType;
				if(isScrollPageType == true){
					let apiInfo = this.apiInfo;
					apiInfo.currentPage += 1;
					this.apiInfo = apiInfo;
					this.isshow = false;
					this.projectInit();
				}
			},
			/**
			 * 项目接口初始化
			 */
			projectInit:function(){
				let that = this;
				let apiInfo = that.apiInfo;
				let list = that.List;
				api.projectList(apiInfo).then(res=>{
					list.push.apply(list,res.data.result.list);
					that.list = list;
					if(res.data.result.list.length == 0){
						that.isScrollPageType = false;
						uni.showToast({
							title: '没有更多',
							icon:'none',
							duration: 2000
						});
					}
				});
			},
			/**
			 * 前往项目详情页面
			 */
			projectDetail:function(item){
				console.log(item);
				uni.navigateTo({
					url: '/subcontractList/project/detail/index?id='+item.id
				});
			},
			/**
			 * 导航栏改变触发事件
			 */
			naVChange:function(id){
				let apiinfo = this.apiInfo;
				apiinfo.type = id;
				apiinfo.currentPage = 1;
				this.isScrollPageType = true;
				this.apiInfo = apiinfo;
				this.navselected = id;
				this.List = [];
				this.projectInit();
			},
			/**
			 * 状态蓝改变触发事件
			 */
			statusChange:function(id){
				let apiinfo = this.apiInfo;
				apiinfo.status = id;
				apiinfo.currentPage = 1;
				this.isScrollPageType = true;
				this.apiInfo = apiinfo;
				this.List = [];
				this.statusSelected= id;
				this.projectInit();
			},
			/**
			 * 创建项目
			 */
			createProject:function(){
				uni.showActionSheet({
					itemList: ['创建新项目', '模板库创建'],
					success: function (res) {
						if(res.tapIndex == 0){
							uni.navigateTo({
								url: '/subcontractList/project/create/create'
							});
						}else if(res.tapIndex == 1){
							uni.showModal({
								title: '提示',
								content: '模版库创建项目，请在WEB端操作您可以创建空白项目',
								confirmText:'创建项目',
								success: function (res) {
									if (res.confirm) {
										uni.navigateTo({
											url: '/subcontractList/project/create/create'
										});
									}
								}
						});
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		width: 100%;
		min-height: 100vh;
		background-color: #f0f3f6;
		.nav-box{
			display: flex;
			background-color: white;
			width: 100%;
			.nav-item{
				text-align: center;
				width:calc(100% / 3);
				line-height: 80rpx;
				height: 80rpx;
				font-size: 28rpx;
			}
			.selected{
				color:#3b9bfe;
				position: relative;
			}
			.selected::after{
				content: '';
				position: absolute;
				width: 20%;
				left: 40%;
				bottom: 0;
				height: 6rpx;
				background-color:#3b9bfe;
			}
		}
		.nav-status-box{
			width: calc(100% - 20rpx);
			margin:10rpx;
			white-space: nowrap;
			height: 60rpx;
			display: flex;
			flex-wrap: nowrap;
			.status-item{
				display: inline-block;
				width: 130rpx;
				text-align: center;
				font-size: 24rpx;
				height: 60rpx;
				line-height: 60rpx;
			}
			.selected{
				color: white;
				background-color: #3b9bfe;
				border-radius: 10rpx;
			}
		}
		.scroll-content{
			width:100%;
			height: calc(100vh - 160rpx - 70rpx - constant(safe-area-inset-bottom));
			height: calc(100vh - 160rpx - 70rpx - env(safe-area-inset-bottom));
			box-sizing: border-box;
			padding: 0 20rpx;
		}
		.create-button{
			background-color: #409eff;
			color: white;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			font-size: 28rpx;
			border-radius: 10rpx;
			margin: 0 20rpx;
			margin-bottom: constant(safe-area-inset-bottom);
			  margin-bottom: env(safe-area-inset-bottom); 
		}
	}
</style>
